import { reactive } from "vue";
import { message } from "@/utils/message";
import { HttpPagePar, ConditionalListType } from "@/utils/http/httpPagePar";
import { getPageDataApi } from "@/api/sendMessage";

import { CmpHandleStateEnum, CmpGlobal } from "@/common/GlobalType";

import type { PaginationProps } from "@pureadmin/table";

type CmpGlobalType = CmpGlobal;
type SearchFormType = {
  issend: number;
};

/**
 * 观看平台hook
 * @returns columns 表格头部列 {obiect} onSearch 表格搜索事件 {obiect}
 */
export function useWatch() {
  /** 表格头部列 */
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      minWidth: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "用户",
      prop: "users.name"
    },
    {
      label: "比赛分类",
      prop: "match.classify.name"
    },
    {
      label: "队伍一",
      prop: "match.teama.name"
    },
    {
      label: "队伍二",
      prop: "match.teamb.name"
    },
    {
      label: "观看平台",
      prop: "match.watch.name"
    },
    {
      label: "比赛时间",
      prop: "matchtime"
    },
    {
      label: "是否推送",
      prop: "issend",
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
          type={row.issend === 1 ? "success" : "danger"}
          effect="plain"
        >
          {row.issend === 1 ? "已推送" : "未推送"}
        </el-tag>
      )
    },
    {
      label: "创建人",
      prop: "createdUsers.name"
    },
    {
      label: "更新人",
      prop: "updatedUsers.name"
    },
    {
      label: "最近更新时间",
      prop: "updatedtime"
    }
  ];
  /** 组件需要全局使用的变量 */
  const cmpglobal = reactive<CmpGlobalType>({
    dialogVisible: false,
    cmpHandleState: CmpHandleStateEnum.View,
    ids: [],
    tableTitle: "提醒订阅列表"
  });
  /** 搜索框表单 */
  const searchform = reactive<SearchFormType>({
    issend: null
  });
  /** 表格绑定数据对象 */
  const tabledata: any = reactive({
    data: []
  });
  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    pageSizes: [10, 15, 20],
    total: 0,
    align: "center",
    background: true,
    small: false
  });

  /** api数据请求体 */
  const httpPagePar = new HttpPagePar();

  /**
   * 向服务器请求表格数据
   */
  function getPageData() {
    httpPagePar.pageNum = pagination.currentPage;
    httpPagePar.pageSize = pagination.pageSize;
    const conditionallist: ConditionalListType[] = [];
    if (searchform.issend !== null) {
      const item: ConditionalListType = {
        key: 0,
        value: {
          fieldName: "issend",
          fieldValue: searchform.issend + "",
          cSharpTypeName: "long",
          conditionalType: 0
        }
      };
      conditionallist.push(item);
    }
    if (conditionallist.length > 0) {
      httpPagePar.conditionalList = conditionallist;
    } else {
      httpPagePar.conditionalList = [];
    }
    httpPagePar.orderBys = ["id desc"];

    getPageDataApi(httpPagePar)
      .then(res => {
        if (res.code === 1) {
          tabledata.data = res.data.data;
          pagination.total = res.data.total;
        } else {
          message(res.msg, { type: "error" });
          tabledata.data = [];
          pagination.total = 0;
        }
      })
      .catch(err => {
        message(`获取表格数据失败:${err}`, { type: "error" });
        console.log(err);
      });
  }

  /**
   * 搜索事件
   */
  const clickSearch = () => {
    pagination.currentPage = 1;
    getPageData();
  };
  /**
   * 分页控件选择显示多少条数据事件
   */
  function onSizeChange(val) {
    pagination.pageSize = val;
    //重新获取数据
    getPageData();
  }
  /**
   * 分页控件选择页码事件
   */
  function onCurrentChange(val) {
    pagination.currentPage = val;
    //重新获取数据
    getPageData();
  }

  /**
   * 表格的刷新事件
   */
  function onSearch() {
    //重新获取数据
    getPageData();
  }

  /**
   * 表格选择列的事件
   * @param val 选中数据
   */
  function handleSelectionChange(val) {
    if (val.length > 0) {
      const selectids: number[] = [];
      val.forEach(function (item) {
        selectids.push(item.id);
      });
      cmpglobal.ids = selectids;
    }
  }

  /**
   * 重置搜索表单
   */
  function resetSearchForm() {
    searchform.issend = null;
    getPageData();
  }

  return {
    columns,
    onSearch,
    searchform,
    tabledata,
    getPageData,
    handleSelectionChange,
    cmpglobal,
    resetSearchForm,
    pagination,
    onSizeChange,
    onCurrentChange,
    clickSearch
  };
}
